<template>
  <div class="login-container">
    <div class="login-box">
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" >
        <img src="./logo_index.png" alt="">
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
             <i slot="prefix" class="iconfont icon-shouji"></i>
          </el-input>

        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入密码">
            <i slot="prefix" class="iconfont icon-ziyuan"></i>
          </el-input>

        </el-form-item >
        <el-form-item prop="xieyi">
             <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
             <span>我已阅读并同意
                 <i>用户协议</i> 和 <i>隐私条款</i></span>
        </el-form-item>
        <el-form-item>
             <el-button type="primary" :loading="isActive" :disabled="isActive" style="width:100%" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import '@/assets/js/gt.js'
import '@/assets/css/global.css'
import '@/assets/iconfont/iconfont.css'
export default {
  name: 'login',
  data () {
    var xieyiTest = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        return callback(new Error('请勾选'))
      }
    }
    return {
      ctaobj: null,
      isActive: false,
      loginForm: {
        mobile: '15324716671',
        code: '246810',
        xieyi: true

      },
      loginFormRules: {
        mobile: [{ required: true, message: '手机号码必填', trigger: 'blur' },
          { pattern: /^1[35789]\d{9}$/, message: '手机号码格式不对' }],
        code: [
          { required: true, message: '验证码必填' }
        ],
        // 自定义方式校验复选框
        xieyi: [
          { validator: xieyiTest, trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    login () {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          if (this.ctaobj) {
            return this.ctaobj.verify()
          }
          // 按钮禁用
          this.isActive = true
          // axios获得极验请求秘钥信息
          this.$http.get(`/captchas/${this.loginForm.mobile}`)
            .then((res) => {
              let { data } = res.data
              window.initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind'
              }, (captchaObj) => {
                captchaObj.onReady(() => {
                  captchaObj.verify()
                  // 把已经生成好的极验赋予给this.catObj
                  this.ctaobj = captchaObj
                  this.isActive = false
                }).onSuccess(() => {
                  this.loginAct()
                }).onError(() => {
                  // your code
                })
              })
            })
            .catch((err) => {
              return this.$message.error('获得极验初始校验信息错误：' + err)
            })
        }
      })
    },
    loginAct () {
      this.$http.post('/authorizations', this.loginForm)
        .then((res) => {
        // console.log(res)
          if (res.data.message === 'OK') {
            window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
            this.$router.push('/home')
          }
        })
        .catch((err) => {
          return this.$message.error('用户名或密码错误' + err)
        })
    }
  }

}
</script>

<style lang="less" scoped>
.login-container {
  background-color: gray;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
background-image: url('./login_bg.jpg');
background-size: cover;
  .login-box {
    width: 410px;
    height: 345px;
    background-color: #fff;
display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  img{
    width: 50%;
    margin:20px auto;

  }
  span{
      margin-left: 10px;
      i{
          color: blue;
          font-style: normal;
      }
  }
  }
  .el-form{
      width: 75%;
  }
}
</style>
